<template>
	<view>
						<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<view v-for="(item,index) in studyScore"  class="card">
			<view class="title-area">
				<view class="title">
					<image class="title-icon" src="../../../static/dot.png"></image>
					<text class="title-text">第{{index+1}}学年</text>
				</view>
				<view class="title">
					<text class="grade">{{item.grade}}-{{item.grade+1}}</text>
				</view>
				<button class="submit-button" size="mini" @click="messageToggle('success')">
					<text class="button-text success-text">导出</text>
					</button>
			</view>
			<view class="row">
				<uni-row >
					<uni-col :offset="1" :span="5" ><text class="prompt" >总学分：</text></uni-col>
					<uni-col :span="4" > <text class="score"> {{item.allCredits}} </text> </uni-col>
					<uni-col :span="6" > <text class="prompt"> 有效均绩： </text> </uni-col>
					<uni-col :span="4" > <text class="score">{{item.validGpa}} </text> </uni-col>
				</uni-row>
			</view>			
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="5"><text class="prompt"> 课程数:</text></uni-col>
					<uni-col :span="4"> <text class="score">{{item.classNum}}</text></uni-col>
				</uni-row>
			</view>
			<view class="view-all" @click="goTo('../courseDetail/courseDetail?year='+item.grade)">
				<text class="score">查看详情></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				save_path:'D: Storage/ score.xlsx',
				messageText: '这是一条成功提示',
				value: '',
				studyScore:[{
					grade:'2021~2022',
					allCredits:31,
					classNum:12,
					validGpa:3.68
				},{
					grade:'2022~2023',
					allCredits:31,
					classNum:12,
					validGpa:3.68
				},{
					grade:'2023~2024',
					allCredits:31,
					classNum:12,
					validGpa:3.68
				}]
			}
		},
		onLoad() {
			const API_BASE_URL = this.$ProjectConfig.API_BASE_URL;
			const this2 = this;
			wx.request({
				url: API_BASE_URL + '/course/yearlyScore',
				method: 'GET',
				header: {
				  'Content-Type': 'application/json',
				},
				data: {
				    user_id:uni.getStorageSync("user_id")
				},
				success: function(res) {
					console.log(res);
					this2.studyScore=res.data
				}
			});
		},
		computed:{
		   goTo:function(){
			   return function(url){
				   uni.navigateTo({
						url:url,
						fail(err) {
							console.log(err)
						}
					})
			   }
		   }
		},
		methods: {
			messageToggle(type) {
					this.msgType = type
					this.messageText = `全部学年的结果已导出！保存路径${this.save_path}`
					this.$refs.message.open()
				}
			},
	}
</script>

<style lang="scss">

.cover,.card{
	margin: 20rpx;
	width: calc(100% - 40rpx); /* 用 calc() 函数计算宽度，减去两倍的 margin 大小 */
	border-radius: 10rpx;
	box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2); 
	height:auto;
	padding:10rpx 0rpx;
}
.title-area{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width:100%;
}
.title{
	width:33%;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.grade{
	width:100%;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color:$uni-text-color-orange;
}
.title-icon{
	width:48rpx;
	height:48rpx;
	margin:20rpx;
}
.title-text{
	font-size: $uni-font-size-lg;
}
.submit-button{
	margin:10rpx;
	background-color: $uni-bg-color;
	width:25%;
	color: #FFF;
	font-size: $uni-font-size-base;
	padding:5rpx;
}
.export-button{
	margin:10rpx;
	background-color: $uni-bg-color;
	width:25%;
	color: #FFF;
	font-size: $uni-font-size-base;
	padding:5rpx;
}
.seperation{
	background-color: #CCC;
	width:100%;
	height:1rpx;
	margin:4rpx 0rpx 10rpx 0rpx;
}
.score{
	color:$uni-bg-color;
}
.row{
	margin:20rpx 0rpx;
	font-size:$uni-font-size-base;
}
.view-all{
	margin:20rpx;
	font-size: $uni-font-size-base;
	display:flex;
	flex-direction: row-reverse;
	align-items: center;
}
.view-all text{
	color:#7e0909;
}
</style>
